<template>
	<view class="store_deta">
		<view class="header">
			<image src="https://kelai.huazhuangpin168.cn/static/images/1.png" class="cover"></image>

			<view class="nav_bar">
				<view class="iconfont icon-ic_left back" @tap="back"></view>
				<view class="title">门店详情</view>
			</view>
			<view class="store_info">
				<image :src="avatar" class="avatar"></image>
				<view class="name">{{name}}</view>
				<view class="like_ok" @click="unfollow" v-if="isFollow">
					<image src="@/static/images/ok.png"></image>
				</view>
				<view class="like" @click="follow" v-else>＋关注</view>
			</view>
		</view>
		<serchView @submit="submit" />

		<view class="tabs">
			<view class="item " :class="active==0?'active':''" @click="change(0)">全部书籍</view>
			<view class="item" :class="active==1?'active':''" @click="change(1)">精品推荐</view>
			<view class="item" :class="active==99?'active':''" @click="change(99)">优惠券</view>
		</view>

		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="scroll_box" v-if="active==99">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="item_view">
						<view class="price">
							<view class="unit">￥</view>
							<view class="value">{{item.coupon_price}}</view>
						</view>
						<view class="other">
							<view class="key">满{{item.use_min_price}}可用</view>
							<view class="value" v-if="item.is_use">已领取</view>
							<view class="value" v-else-if="item.is_use==2">已领完</view>
							<view class="value active" @click="claim(item.id)" v-else>点击领取</view>
						</view>
					</view>
				</view>
			</view>

			<view class="list" v-else>
				<view class="item" v-for="(item,index) in list" :key="index"
					@click="router(`/pages/goods_details/index?id=${item.id}`)">
					<image :src="item.image" class="cover"></image>
					<view class="name line1">{{item.store_name}}</view>
					<view class="price_info">
						<view class="price">
							<text class="unit">￥</text>
							<text class="value">{{item.price}}</text>
						</view>
						<view class="original_price">
							<text class="unit">￥</text>
							<text class="value">{{item.ot_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getnearbyStore,
		collectAdd,
		collectDel,
		getProducts
	} from '@/api/new_store.js'

	import {
		getCouponsList,
		setCouponReceive
	} from '@/api/api.js';

	import serchView from '@/components/serchView/serchView';
	export default {
		components: {
			serchView
		},
		data() {
			return {
				store_id: null,
				avatar: "",
				name: "",
				isFollow: false,
				active: 0,


				page: 1,
				last_page: 1,
				keywords: "",
				is_best: 0,
				list: []
			}
		},
		onLoad(options) {
			this.store_id = options.id;

			uni.setStorageSync("store_id", options.id);
			getnearbyStore({
				latitude: "",
				longitude: "",
				store_id: options.id
			}).then(res => {
				this.isFollow = res.data.is_followed;
				this.avatar = res.data.info.image;
				this.name = res.data.info.name;
			})
			this.getList()
		},
		methods: {
			router(url) {
				uni.navigateTo({
					url
				})
			},

			// 获取优惠券
			getCoupons() {
				getCouponsList({
					store_id: this.store_id,
				}).then(res => {
					let data = res.data;
					let list = data.stores;
					if (!list.length) return;
					this.list = list[0].coupons;
				})
			},

			claim(id) {
				setCouponReceive(id).then((res) => {
					this.$util.Tips({
						title: '领取成功'
					});
					this.getCoupons();
				}).catch(error => {
					return this.$util.Tips({
						title: error
					});
				})
			},

			// 获取门店书籍
			getList() {
				getProducts({
					store_id: this.store_id,
					keyword: this.keywords,
					is_best: this.active,
					page: this.page,
					limit: 10,
				}).then(res => {
					console.log(res.data)
					this.list = res.data;
				})
			},
			loadmore() {
				if (this.active == 99) return;
				if (this.page >= this.last_page) return;
				this.page++;
				this.getList()
			},
			change(val) {

				this.list = [];
				this.active = val;
				if (val == 99) {
					this.getCoupons()
					return
				} else {
					this.page = 1;
					this.getList()
				}
			},
			submit(value) {
				this.keywords = value;
				this.page = 1;

				if (this.active == 99) this.active = 0;
				this.getList();
			},
			follow() {
				collectAdd({
					id: this.store_id,
					category: "store"
				}).then(res => {
					this.isFollow = true;
				})
			},
			unfollow() {
				// collectDel({
				// 	id: this.store_id,
				// 	category: "store"
				// }).then(res => {
				// 	this.isFollow = false;
				// })


				collectDel(this.store_id, "store").then(res => {
					this.isFollow = false;
				})
			},

			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.store_deta {
		min-height: calc(100vh);
		background-color: #fff;

		.header {
			width: 748rpx;
			height: 336rpx;
			overflow: hidden;
			position: relative;

			.cover {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}

			.nav_bar {
				margin-top: calc(var(--status-bar-height) + 62rpx);
				height: 50rpx;
				position: relative;
				z-index: 2;

				.back {
					color: #fff;
					font-size: 34rpx;
					position: absolute;
					left: 40rpx;
					top: 50%;
					transform: translateY(-50%);
				}

				.title {
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}

			.store_info {
				padding: 32rpx 0 0 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				position: relative;
				z-index: 2;

				.avatar {
					width: 104rpx;
					height: 104rpx;
					border-radius: 50%;
				}

				.name {
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.like {
					width: 124rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					font-size: 28rpx;
					color: #FFFFFF;
					background: linear-gradient(131deg, #FF8133 0%, #FF8133 100%);
					border-radius: 132rpx 132rpx 132rpx 132rpx;

				}

				.like_ok {
					width: 74rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.tabs {
			height: 74rpx;
			padding: 0rpx 28rpx 24rpx;
			box-sizing: border-box;
			display: flex;

			.item {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 32rpx;
				color: #333333;
				margin-right: 54rpx;

				&.active {
					font-weight: bold;
					position: relative;

					&::after {
						content: "";
						width: 72rpx;
						height: 12rpx;
						background: #FF8133;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						position: absolute;
						left: 50%;
						bottom: -28rpx;
						transform: translateX(-50%);
					}
				}
			}
		}

		.scroll_view {
			height: calc(100vh - 336rpx - 74rpx - 112rpx);
			padding-top: 24rpx;
			box-sizing: border-box;




			.scroll_box {
				// height: 150rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					// display: inline-block;
					// width: 360rpx;
					// height: 150rpx;
					border-radius: 16rpx;
					padding: 10rpx;
					box-sizing: border-box;
					background: linear-gradient(180deg, #FA6E42 0%, #EA0606 100%);
					margin-bottom: 10rpx;
					position: relative;
					overflow: hidden;

					&::after {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						content: "";
						background: linear-gradient(180deg, #FA6E42 0%, #EA0606 100%);
						position: absolute;
						left: -10rpx;
						top: 50%;
						transform: translateY(-50%);
					}

					&::before {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						content: "";
						background: linear-gradient(180deg, #FA6E42 0%, #EA0606 100%);
						position: absolute;
						right: -10rpx;
						top: 50%;
						transform: translateY(-50%);
					}


					&:last-child {
						margin-right: 0;
					}

					.item_view {
						flex: 1;
						// min-width: 340rpx;
						height: 130rpx;
						padding: 0 10rpx;
						box-sizing: border-box;
						background: linear-gradient(180deg, #FFFEFE 0%, #F9EAD6 100%);
						border-radius: 12rpx 12rpx 12rpx;
						display: flex;

						.price {
							// width: 50%;
							padding-right: 20rpx;
							display: flex;
							align-items: baseline;
							position: relative;

							&::after {
								content: "";
								height: 60rpx;
								border-right: 2rpx solid #FFA184;
								position: absolute;
								top: 50%;
								right: 0rpx;
								z-index: 2;
								transform: translateY(-50%);
							}

							.unit {
								font-size: 30rpx;
								color: #F8251A;
							}

							.value {
								font-weight: 500;
								font-size: 80rpx;
								color: #F8251A;
							}
						}

						.other {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							padding-left: 20rpx;

							.key {
								height: 36rpx;
								line-height: 36rpx;
								font-size: 20rpx;
								color: #F8251A;
							}

							.value {
								width: 136rpx;
								height: 44rpx;
								line-height: 44rpx;
								text-align: center;
								font-size: 22rpx;
								color: #F8251A;
								background: linear-gradient(135deg, #F1B371 0%, #FFEBD1 100%);
								border-radius: 23rpx 23rpx 23rpx 23rpx;

								&.active {
									font-size: 22rpx;
									color: #F8251A;
									background: linear-gradient(135deg, #F1B371 0%, #FFEBD1 100%);
								}
							}
						}
					}
				}
			}




			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 0rpx 32rpx 0;
				box-sizing: border-box;

				.item {
					width: 50%;
					margin-bottom: 20rpx;
					overflow: hidden;

					.cover {
						width: 334rpx;
						height: 370rpx;
						border-radius: 10rpx;
					}

					.name {
						width: 100%;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						padding: 12rpx 0 16rpx;
						box-sizing: border-box;
					}
				}
			}

		}

	}
</style>